const path = require('path');//node 系统自带的，表示当前目录的绝对路径
const HtmlWebpackPlugin = require('html-webpack-plugin');//引入html插件
const CleanWebpackPlugin = require('clean-webpack-plugin');
const webpack = require('webpack');
const ExtractTextPlugin=require('extract-text-webpack-plugin');
module.exports = {
	//入口（多入口方式）
	entry: {
		rock1: './src/index.js',
		rock2: './src/index2.js'

	},
	//出口
	output: {
		path: path.resolve(__dirname, 'dist'),//目标文件路径，必须是绝对路径,__dirname表示当前目录
		filename: '[name].boundle.js'//目标文件名,多出口方式
	},
	devServer: {
		contentBase: path.resolve(__dirname, 'dist'),//设置服务器访问的基本目录
		host: 'localhost',//服务器地址
		port: 8900,
		open: true,//自动打开浏览器
		hot: true//热更新

	},
	module: {
		rules: [
			{
				test: /\.css$/,//正则表达式，以css结尾的用以下loader
				//use:['style-loader','css-loader']
				//loader:['style-loader','css-loader']//等价于use
				use:ExtractTextPlugin.extract({
					fallback:'style-loader',
					use:'css-loader',
					publicPath:'../'// 解决css背景图路径
				})
			},
			{
				test: /\.(jpg|png|gif)$/,//正则表达式，以css结尾的用以下loader
				use: [
					{
						 loader: 'url-loader' ,
						 options:{
							 limit:500,//限制图片大小
							 outputPath:'images'//图片打包目录
						 }
				
					}
				]
			}

		]

	},
	plugins: [
		new webpack.HotModuleReplacementPlugin(),//调用热更新
		new CleanWebpackPlugin(['dist']),
		new HtmlWebpackPlugin({
			chunks: ['rock1'],//引入的js
			filename: 'index11.html',//生成的html文件名
			title: 'hello zhoushengqiang',
			hash: true,
			template: './src/index.html'//模板文件
		}),
		new HtmlWebpackPlugin({
			chunks: ['rock2'],
			filename: 'index22.html',
			title: 'hello hotdog',
			hash: true,
			template: './src/index2.html'
		}),
		new ExtractTextPlugin('css/index.css')//提取CSS文件插件
	]

	//loaders
	//module:{},
	//插件
	//plugins:[],
	//开发服务器
	//devServer:{},

};
